<script lang="ts">
import {defineComponent} from "vue"
import {usePreviewImages, useResource} from "@/components/FunctionComponents"
import type {PropType} from 'vue';
import UploadImage from "@/assets/image/upload-ico.png"
import {useDisabledStatus} from "@/hooks/form";

export default defineComponent({
  name: "ImageListInput",
  emits: ['update:modelValue', 'change', 'input'],
  props: {
    modelValue: {
      type: Array as PropType<Array<string>>,
      required: true
    },
    limit: {
      type: Number,
      default: 15
    },
    disabled: {
      type: Boolean
    }
  },
  setup(props, {emit}) {
    //不这么做类型提示飘红
    const icon: string = UploadImage

    //禁用状态
    const IsDisabled = useDisabledStatus(props?.disabled)

    /**
     * 更改数据
     * @param value
     * @constructor
     */
    function ValueChange(value: Array<string>) {
      emit('change', value)
      emit('input', value)
      emit('update:modelValue', value)
    }

    /**
     *  选择图片
     */
    function selectImage() {
      useResource('image', function (res: any[]) {
        if (res.length > 0) {
          let value = [...props.modelValue]
          for (let file of res) {
            value.push(file.url)
          }
          value.splice(props.limit, 100000)
          ValueChange(value)
        }
      }, props.limit - props.modelValue.length)
    }

    /**
     * 预览图
     * @param src
     * @constructor
     */
    function PreviewImages(src: string) {
      usePreviewImages(src)
    }


    /**
     * 清空值
     * @constructor
     */
    function ClearValue(index: number) {
      let value = [...props.modelValue]
      value.splice(index, 1)
      ValueChange(value)
    }

    return {
      selectImage,
      ClearValue,
      icon,
      IsDisabled,
      PreviewImages
    }
  }
})
</script>

<template>
  <div class="image-list-input">
    <div v-for="(item,index) in modelValue" :key="index" class="image-input">
      <div class="image-box" v-if="item">
        <el-image :src="item" loading="lazy" lazy></el-image>
        <div class="image-tool">
          <app-icon name="View" @click.stop="PreviewImages(item)"></app-icon>
          <app-icon v-if="!IsDisabled" @click.stop="ClearValue(index)" name="Close"></app-icon>
        </div>
      </div>
    </div>
    <div v-if="limit > modelValue.length && !IsDisabled" class="image-input app-tap" @click="selectImage">
      <div class="image-box">
        <el-image loading="lazy" lazy :src="icon"></el-image>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
$image-input-size: 60px;
.image-list-input {
  .image-input {
    display: inline-block;
    width: $image-input-size;
    height: $image-input-size;
    border: 1px solid var(--el-border-color);
    background-color: var(--el-bg-color-page);
    border-radius: 4px;
    box-sizing: border-box;
    margin-right: 3px;

    .image-box {
      position: relative;
      width: $image-input-size;
      height: $image-input-size;

      .el-image {
        position: absolute;
        left: 0;
        top: 0;
        width: calc($image-input-size - 2px);
        height: calc($image-input-size - 2px);
        border-radius: 4px;
      }

      .image-tool {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: calc($image-input-size - 2px);
        height: calc($image-input-size - 2px);
        line-height: calc($image-input-size - 2px);
        text-align: center;
        background-color: rgba(0, 0, 0, .5);
        border-radius: 4px;

        :deep(.app-icon) {
          margin: 0 5px;
          color: #ffffff;
          cursor: pointer;
        }
      }

      &:hover {
        .image-tool {
          display: inline-block;
        }
      }
    }
  }
}
</style>
